<template>
<Select v-bind="$attrs" v-on="$listeners" v-if="$attrs.multiple" v-model="roles" :placeholder="placeholder">
    <Option v-for="item in data" :value="item.roleid" :key="item.roleid">{{ item.rolename }}</Option>
</Select>
<Select v-bind="$attrs" v-on="$listeners" v-else v-model="role" :placeholder="placeholder">
    <Option v-for="item in data" :value="item.roleid" :key="item.roleid">{{ item.rolename }}</Option>
</Select>
</template>

<script>
export default {
    props: {
        value: {
            type: [String, Number, Array]
        },
        isUser: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            data: [],
            role: "",
            roles: [],
            placeholder: "数据加载中...",
        }
    },
    watch: {
        value: "initData"
    },
    methods: {
        async loadData() {
            let res = {}

            if (this.isUser) {
                res = await this.$api.role.getUserRoles({
                    status: 1,
                    page: 1,
                    rows: 100000
                })
            } else {
                res = await this.$api.role.getRoles({
                    status: 1,
                    page: 1,
                    rows: 100000
                })
            }

            this.data = res.rows
            this.placeholder = "请选择"
        },
        initData(newVal, oldVal) {
            if (this.$attrs.multiple) {
                this.roles = newVal
            } else {
                this.role = newVal;
            }
        }
    },
    mounted() {
        this.loadData()
    },
}
</script>

<style lang="less" scoped>

</style>
